/* 
类组件状态：
  1. 创建：写到 state 对象中，并设置变量初始值
  2. 使用：通过 this.state.xxx 访问
  3. 修改：通过 this.setState({ xxx })
*/


import React, { useState } from 'react';

// 函数式组件
function App() {
  // useState 设置状态初始值
  // 调用 useState() 返回一个数组
  //    1. 数组第一项是  某个状态的初始值
  //    2. 数组第二项是  用于某个状态的函数

  // const res = useState(100);
  // const count = res[0];
  // const setCount = res[1];
  // 数组解构简化写法：
  const [count, setCount] = useState(100);

  return <div>
    {count}
    <button onClick={() => setCount(200)}>修改状态</button>
  </div>;
}

export default App;



// 类组件的写法;
// class App extends React.Component {
//   state = {
//     count: 0
//   };
//   render() {
//     return (
//       <div className="App">
//         {this.state.count}
//         <button onClick={() => this.setState({ count: this.state.count + 1 })}>修改状态</button>
//       </div>
//     );
//   }
// }
// export default App;
